<template>
  <div class="departments-container">
    <div class="app-container">

      <el-card class="tree-card">
        <!-- 头部 -->
        <TreeTools :node-data="company" :isroot="isroot" @addDept="addDept" />
        <!-- 树形菜单 -->
        <el-tree :data="list" :props="defaultProps" default-expand-all>
          <template v-slot="{data}">
            <TreeTools :node-data="data" @addDept="addDept" @editDept="editDept" @getDeptList="getDeptList" />
          </template>
        </el-tree>
      </el-card>

      <!-- 弹出层 -->
      <DeptLayer ref="modify" :show-dialog.sync="showDialog" :current-id="currentId" @getDeptList="getDeptList" />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/TreeTools.vue'
import { getDepts } from '@/api/department'
import { ArrToTree } from '@/utils/index'
import DeptLayer from './components/DeptLayer.vue'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    DeptLayer
  },
  data() {
    return {
      list: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      isroot: false,
      showDialog: false,
      currentId: ''
    }
  },
  // 1.完成数据的渲染__________________________________________________
  created() {
    this.getDeptList()
  },
  methods: {
    async getDeptList() {
      const res = await getDepts()
      console.log(res)
      this.list = ArrToTree(res.depts)
    },
    // 2.删除部门__________________________________________________
    // 3.添加部门__________________________________________________
    addDept(id) {
      this.showDialog = true
      this.currentId = id
      // this.$refs.add.getAllManager()
    },
    /* add() {
      this.showDialog = false
      this.getDeptList()
    }, */
    // 4.修改部门__________________________________________________
    // 不能在弹出层组件 created()方法中发请求,因为只有点击编辑的时候才会有id
    // 所以,要父传子 来发请求 获取部门信息
    editDept(id) {
      this.showDialog = true
      this.currentId = id
      this.$refs.modify.getDeptDetail(id)
    }
  }
}
</script>
<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
